import React, { Component } from "react";
import FilterTitle from "../FilterTitle";
import FilterPicker from "../FilterPicker";
import FilterMore from "../FilterMore";
import styles from "./index.module.css";
import { API } from "../../../../utils/api";
import { style } from "dom-helpers";

// 标题高亮的状态
const titleSelectedStatus = {
	area: false,
	mode: false,
	price: false,
	more: false,
};

//FilterPicker和FilterMore组件选中值的状态
const selectedValues = {
	area: ["area", "null"],
	mode: ["null"],
	price: ["null"],
	more: [],
};

class Filter extends Component {
	state = {
		titleSelectedStatus,
		// 控制组件显示/隐藏
		openType: "",
		// 所有筛选条件的数据
		filtersData: {},
		// 筛选条件的选中值
		selectedValues,
	};
	// 点击标题菜单实现高亮
	// 注意：this指向的问题！
	onTitleClick = (type) => {
		// 给body添加样式
		this.htmlBody.className='body-fixed'
		const { titleSelectedStatus, selectedValues } = this.state;
		// 创建新的标题选中状态对象
		const newTitleSelectedStatus = { ...titleSelectedStatus };

		// 遍历标题选中状态对象
		Object.keys(titleSelectedStatus).forEach((key) => {
			// key表示数组中的每一项
			if (key === type) {
				// 当前标题
				newTitleSelectedStatus[type] = true;
				return;
			}

			// 其他标题
			const selectedVal = selectedValues[key];
			if (
				key === "area" &&
				(selectedVal.length !== 2 || selectedVal[0] !== "area")
			) {
				newTitleSelectedStatus[key] = true;
			} else if (key === "mode" && selectedVal[0] !== "null") {
				newTitleSelectedStatus[key] = true;
			} else if (key === "price" && selectedVal[0] !== "null") {
				newTitleSelectedStatus[key] = true;
			} else if (key === "more" && selectedVal.length != 0) {
				// 更多选项
				newTitleSelectedStatus[key] = true;
			} else {
				newTitleSelectedStatus[key] = false;
			}
		});

		this.setState({
			// 展示对话框
			openType: type,
			// 使用新的标题选中状态来更新
			titleSelectedStatus: newTitleSelectedStatus,
		});
	};

	componentDidMount() {
		// 获取body
		this.htmlBody=document.body

		this.getFiltersData();
	}

	// 取消 隐藏对话框
	onCancel = (type) => {
		this.htmlBody.className=''
		const { titleSelectedStatus, selectedValues } = this.state;
		// 创建新的标题选中状态对象
		const newTitleSelectedStatus = { ...titleSelectedStatus };

		const selectedVal = selectedValues[type];
		if (
			type === "area" &&
			(selectedVal.length !== 2 || selectedVal[0] !== "area")
		) {
			newTitleSelectedStatus[type] = true;
		} else if (type === "mode" && selectedVal[0] !== "null") {
			newTitleSelectedStatus[type] = true;
		} else if (type === "price" && selectedVal[0] !== "null") {
			newTitleSelectedStatus[type] = true;
		} else if (type === "more" && selectedVal.length != 0) {
			// 更多选项
			newTitleSelectedStatus[type] = true;
		} else {
			newTitleSelectedStatus[type] = false;
		}

		this.setState({
			openType: "",
			titleSelectedStatus: newTitleSelectedStatus,
		});
	};
	// 确定（隐藏对话框）
	onSave = (type, value) => {
		this.htmlBody.className=''
		const { titleSelectedStatus } = this.state;
		// 创建新的标题选中状态对象
		const newTitleSelectedStatus = { ...titleSelectedStatus };

		const selectedVal = value;
		if (
			type === "area" &&
			(selectedVal.length !== 2 || selectedVal[0] !== "area")
		) {
			newTitleSelectedStatus[type] = true;
		} else if (type === "mode" && selectedVal[0] !== "null") {
			newTitleSelectedStatus[type] = true;
		} else if (type === "price" && selectedVal[0] !== "null") {
			newTitleSelectedStatus[type] = true;
		} else if (type === "more" && selectedVal.length != 0) {
			// 更多选项
			newTitleSelectedStatus[type] = true;
		} else {
			newTitleSelectedStatus[type] = false;
		}

		const newSelectedValues = {
			...this.state.selectedValues,
			// 只更新当前type对应的选中值
			[type]: value,
		};
        // 筛选条件数据
        const filter={}

        const {area,mode,price,more} = newSelectedValues
        const areaKey = area[0]
        let areaValue='null'

        if(area.length===3){
            areaValue=area[2] !=='null'?area[2]:area[1]
        }
        // 方式和租金
        filter.mode=mode[0]
        filter.price=price[0]
        // 更多筛选条件
        filter.more=more.join(',')
        // 区域
        filter[areaKey]=areaValue

        // console.log(filter)
        // 调用父组件中的方法，来讲筛选数据传递给父组件
        this.props.onFilter(filter)

		this.setState({
			openType: "",
			titleSelectedStatus: newTitleSelectedStatus,
			selectedValues: newSelectedValues,
		});
	};

	// 获取所有筛选条件
	getFiltersData = async () => {
		// 获取当前定位城市的id
		const { value } = JSON.parse(localStorage.getItem("ytzf_city"));
		const res = await API.get(`/houses/condition?id=${value}`);
		this.setState({
			filtersData: res.data.body,
		});
	};
	// 渲染FilterPicker组件的方法
	renderFilterPicker = () => {
		const {
			openType,
			filtersData: { area, subway, rentType, price },
			selectedValues,
		} = this.state;
		if (openType !== "area" && openType !== "mode" && openType !== "price") {
			return null;
		}

		// 根据openType来拿到当前筛选条件的数据
		let data = [];
		let cols = 3;
		let defaultValue = selectedValues[openType];
		switch (openType) {
			case "area":
				// 获取区域数据
				data = [area, subway];
				cols = 3;
				break;
			case "mode":
				// 获取区域数据
				data = rentType;
				cols = 1;
				break;
			case "price":
				// 获取区域数据
				data = price;
				cols = 1;
				break;
		}

		return (
			<FilterPicker
				key={openType}
				onCancel={this.onCancel}
				onSave={this.onSave}
				data={data}
				cols={cols}
				type={openType}
				defaultValue={defaultValue}
			/>
		);
	};
	// 渲染FilterMore的方法
	renderFilterMore = () => {
		const {
			openType,
			selectedValues,
			filtersData: { roomType, oriented, floor, characteristic },
		} = this.state;
		const data = { roomType, oriented, floor, characteristic };
		const defaultValue = selectedValues.more;
		if (openType !== "more") {
			return null;
		} else {
			return (
				<FilterMore
					data={data}
					type={openType}
					onSave={this.onSave}
					onCancel={this.onCancel}
					defaultValue={defaultValue}
				/>
			);
		}
	};

	render() {
		const { titleSelectedStatus, openType } = this.state;
		return (
			<div className={styles.root}>
				{/* 前三个菜单的遮罩层 */}
				{/*  */}
				{openType === "area" || openType === "mode" || openType === "price" ? (
					<div
						className={styles.mask}
						onClick={() => this.onCancel(openType)}
					></div>
				) : null}

				<div className={styles.content}>
					{/* 标题栏 */}
					<FilterTitle
						titleSelectedStatus={titleSelectedStatus}
						onClick={this.onTitleClick}
					/>

					{/* 前三个数据对应的内容 */}
					{this.renderFilterPicker()}

					{/* 最后一个数据对应的内容 */}
					{this.renderFilterMore()}
				</div>
			</div>
		);
	}
}

export default Filter;
